
<template>
	<u-popup	mode="bottom"
				:show="value"
				round="20"
				:closeable="true"
				:safeAreaInsetBottom="false" 
				@close="close" 
				height="800"
	>
			<view class="sku-popover">
				<view class="sku-popver-info bb">
					<image class="sku-popver-image" :src="$store.state.host+params.filePath" mode="aspectFill" @tap="previewImage"></image>
					<view class="sku-popver-title left dis-flex flex-between" style="flex-direction: column;height: 160rpx;">
						<view class="c-red fs16 fw600">{{params.scoreprice}}积分</view>
						<view class="c-000 fs14">库存{{params.stock}}</view>
					</view>
				</view>
				<scroll-view scroll-y="true" class="sku-popover-scroll">
					<!-- <view class="px15 py10" v-for="(sku,skuindex) in skuList" :key="skuindex">
						<view class="fwb fs14">{{sku.attrName}}<text>:</text></view>
						<view class="dis-flex flex-wrap">
							<text class="sku-item" :class="(attr&&attr.selected?'active':'')"  v-for="(attr, attrindex) in sku.skuAttrList" :key="attrindex"   @tap="selectSkuAttr(skuindex,attrindex)">
								{{attr?attr.sdValue:'--'}}
							</text>
						</view>
					</view> -->
					<view class="address-view mx12 br15" @tap="$api.openWindow('/pages/center/address?source=1')">
						<view v-if="addressInfo" class="dis-flex flex-align-center">
							<u-image src="/static/images/address.png" width="48" height="48"></u-image>
							<view class="address-info px5">
								<view class="c-333 fs14 fwb ellipsis-1 breakall">{{addressInfo.truename}}<text class="ml10">{{addressInfo.mobile}}</text></view>
								<view class="breakall dis-flex flex-align-center fs14 c-333 mt20">
									<text class="ellipsis-1 breakall">{{addressInfo.region}}/{{addressInfo.city}}/{{addressInfo.xian}} {{addressInfo.address}}</text>
								</view>
							</view>
							<u-icon name="arrow-right" size="30" color="#333"></u-icon>
						</view>	
						<view v-else class="dis-flex flex-align-center">
							<view class="address-info">
								<view class="fs13 c-common">当前没有可用收货地址</view>
								<view class="fs13 c-common mt10">点击添加收货地址</view>
							</view>
							<u-icon name="arrow-right" size="30" color="#333"></u-icon>
						</view>
					</view>
					<view class="px15 py10 dis-flex flex-align-center flex-between">
						<text class="fwb fs15">兑换数量</text>
						<view class="fr fs15">
							<u-number-box buttonSize="80rpx" inputWidth="120rpx" min="1" step="1" :max="params.stock" v-model="buyNum"></u-number-box>
						</view> 
					</view>
				</scroll-view>
				<!-- <view class="sku-button-box bdn dis-flex flex-between" >
					<button  class="flex br20 mautox5 bg-orange-gradient c-fff fs14" @tap="skuSubmit(1)">加入购物车</button>
					<button class="flex br20 mautox20 bg-common c-fff fs14" @tap="skuSubmit(2)">确定</button>
					<button v-if="showType == 4" class="flex br20 mautox5 bg-common-gradient c-fff fs14" @tap="skuSubmit(3)">立即抢购</button>
				</view> -->
				<view class="btn-submit-box">
					<button class="btn-submit bg-common c-fff" @tap="skuSubmit">确定</button>
				</view>
			</view>
	</u-popup>
</template>

<script>
/**
 * sku弹框
 * @property [String,Number] productId 商品id  必传
 * @property {Object} params 需要显示的参  必传
 */
import {
		mapState,
		mapMutations
	} from 'vuex';
export default {
	computed: {
		...mapState(['hasLogin', 'userInfo', 'refreshOrder'])
	},
	name: 'ThSkuPopup',
	props: {
		productId:{
			type:[String,Number] ,
			default:""
		},
		params:{//传入参数
			type:Object,
			default() {
				return {
					filePath:'',
					scoreprice: '',
					stock: '',
					addressInfo:''
				}
			}
		},
		// 通过双向绑定控制组件的弹出与收起
		value: {
			type: Boolean,
			default: false
		},
	},
	data() {
		return {
			buyNum:1,
			// picker中需要显示的参数
			// proParam: {
			// 	filePath:"",//sku图片
			// 	skuPrice:"",//sku价格
			// 	stockNum:"",//库存
			// 	skuName:"",//选中sku名称
			// 	skuId: '',//选中skuId
			// 	buyNum: 1,//购买数量
			// 	miniSupply:1,//起订量
			// 	purchasingIncremental:1,//增量
			// 	purchaseNum:1,			//限购量
				
			// },
			// skuList:[],//sku数组
			// skuAttrList:[],//sku组合价格数据
			// proType:1,//商品类型   默认为1c端商品。2为B端商品
			// showType:1,//1 加入购物车   2立即购买 4立即秒杀
			// seckillSkuCode:'',		//秒杀商品的SKU
			
			addressInfo:''
		};
	},
	mounted() {
		if(this.productId && this.productId !== ""){
			// this.init();
		}
	},
	// watch: {
	// 	productId(val,old){
	// 		if(val!==""){
	// 			// this.init();
	// 		}
	// 	},
	// 	value(val){
	// 		if(val){
	// 		 // this.showType=this.params.showType||1;
	// 		}
	// 	},
	// },
	
	watch: {
	   params: {
	     handler(newVal, oldVal) {
			 this.addressInfo = newVal.addressInfo
			 console.log(JSON.stringify(newVal))
			 console.log(222)
			 console.log(JSON.stringify(this.addressInfo))
	     },
	     deep: true
	   }
	},
	
	methods: {
		close() {
			this.$emit('input', false);
		},

		// =====================sku弹框内部点击逻辑==============================
		//初始化弹框数据
		init() {},
		
		//sku及购买
		loadSkuData() {},
		
		//过滤可以选择的SKU
		filterInvalidSku(skuList) {},
		
		//秒杀商品过滤SKU
		seckillHasUseingId(sdId) {},
		
		//是否包含此sdid
		hasUseingId(sdId) {},
		
		//默认选中
		skuDefaultSelect() {},
		
		
		//sku弹框点击确定
		skuSubmit() {
			if(!this.addressInfo){
				this.$api.toast('请选择地址');
				return;
			}
			this.$emit("complete",{buyNum:this.buyNum,addressInfo:this.addressInfo});
		},
		
		//选择sku完成
		selsctSkuFinish(selectSku){
			this.$emit("complete",selectSku);
		},
		
		//预览图片
		previewImage(){
			// uni.previewImage({
			// 	current:0,
			// 	urls: [this.$store.state.host + this.params.filePath],
			// })
		},
	
	}
};
</script>

<style lang="scss" scoped>
	.address-view {padding: 30rpx 20rpx;background-color: #fff;}
	.address-view .address-info {flex: 1;display: flex; flex-direction: column; justify-content: center; }
	
	
	/* sku弹框 */
	.sku-popover{width:100%;height:800rpx;}
	.sku-popver-info{display: flex;padding: 20rpx;}
	.sku-popver-image{width:160rpx;height:160rpx;margin-right:20rpx;border:1rpx solid #ddd;}
	.sku-popver-title{flex: 1; padding-top: 10rpx;}
	.sku-popover-scroll{height:500rpx}
	.sku-item{border:1px solid #ccc;border-radius: 50rpx;padding:10rpx 20rpx;margin: 10rpx 20rpx 10rpx 0;font-size: 26rpx;}
	.sku-item.active{color:#ff3232;border:1px solid #ff3232}
	.sku-button-box{
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: #ffffff;
		border-top: 1px solid #eee;
		padding-top: 10rpx;
		padding-bottom: 10rpx;
	}
</style>
